<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24" v-if="model.manName">
            <a-form-model-item label="封号用户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userId">
              <a-select default-value="2" v-model="sex">
                <a-select-option value="1">男用户</a-select-option>
                <a-select-option value="2">女用户</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="昵称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userName">
              {{sex == '1' ? model.manName+'（ID：'+model.manUserId+'）' : model.womanName+'（ID：'+model.womanId+'）'}}
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :trigger="['change', 'blur']" :label="model.type=='1' ? '封号时间' :'禁言时间'" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endTime">
<!--              <a-range-picker
                v-model="model.beginTime"
                :default-value="[moment(moment().format('YYYY-MM-DD hh:mm:ss'), dateFormat)]"
                :disabled-date="disabledDate"
                :show-time="{
                  hideDisabledOptions: true,
                  defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                }"
                format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />-->
              <j-date :show-time="true" disabled date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" class="query-group-cust" v-model="model.beginTime"></j-date>
              <span class="query-group-split-cust"></span>
              <j-date :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" class="query-group-cust" v-model="model.endTime"></j-date>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="model.type=='1' ? '封号原因' :'禁言原因'" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="banReason">
              <a-textarea v-model="model.banReason" rows="4" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="证明" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fileUrl">
              <j-upload v-model="model.fileUrl"></j-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import moment from 'moment';
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'BanaccountForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          endTime:[
            { required: true, message: '请选择封号时间!'},
          ],
           banReason: [
              { required: true, message: '请输入!'},
           ],
        },
        url: {
          add: "/user/banaccount/add",
          edit: "/user/banaccount/edit",
          queryById: "/user/banaccount/queryById"
        },
        sex:"2",
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      moment,
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        this.model.beginTime = this.getNewDate();
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            if(!that.model.beginTime){
              that.$message.warning('请选择封号时间!');
              return;
            }
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            if(this.sex=='1'){
              that.model.userId=that.model.manUserId;
              that.model.userName=that.model.manName;
              that.model.sex="1";
            }else {
              that.model.userId=that.model.womanId;
              that.model.userName=that.model.womanName;
              that.model.sex="2";
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
      //获取当前时间
      getNewDate(){
        // 创建一个新的日期对象，表示当前时间
        let now = new Date();

        // 获取各个部分并进行必要的格式化（月份需要+1，因为JavaScript的getMonth()返回的是0-11的整数）
        let year = now.getFullYear();
        let month = ('0' + (now.getMonth() + 1)).slice(-2);
        let day = ('0' + now.getDate()).slice(-2);
        let hours = ('0' + now.getHours()).slice(-2);
        let minutes = ('0' + now.getMinutes()).slice(-2);
        let seconds = ('0' + now.getSeconds()).slice(-2);

        // 拼接成所需格式
        let formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

        return formattedTime;
      }
    }
  }
</script>